<template>
    <div>
        <template>
            <div class="align-right">
              <el-form :inline="true" :model="listQuery">
                  <div class="pull-right">
                    <el-form-item label="状态：">
                            <el-select v-model="listQuery.state" placeholder="请选择状态">
                                <el-option
                                v-for="item in status"
                                :key="item.codeKey"
                                :label="item.codeValue"
                                :value="item.codeKey">
                                </el-option>
                            </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                        v-model="listQuery.year"
                        type="year"
                        value-format="yyyy"
                        placeholder="选择年"
                        style="width:250px">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable v-model="listQuery.period" placeholder="请选择期数" style="width:260px">
                        <el-option
                        v-for="item in periods"
                        :key="item.codeKey"
                        :label="item.codeValue"
                        :value="item.codeKey">
                        </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button>
                    </el-form-item>
                  </div>
                  <div>
                    <el-button @click="addMagazine">新增杂志</el-button>
                  </div>
              </el-form>
            </div>
            <el-table
                 v-loading="loading"
                class="mb20"
                ref="magazine_table"
                :data="magazine_tables"
                row-key="id"
                border
                highlight-current-row
                @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column align="center" label="序号" min-width ="70" >
                    <template slot-scope="scope">
                        <span>{{ scope.$index+1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="期数" min-width ="120" >
                    <template slot-scope="scope">
                        <router-link tag='a' :to="{path:'/magazine/singlePeriodMagazineList',query:{id:scope.row.id,router:scope.row.year+'年第'+scope.row.period+'期'}}" >{{ scope.row.year+'年第'+scope.row.period+'期' }}</router-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="文章数" min-width ="90" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.contentNum?scope.row.contentNum:0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="上架时间" min-width ="160" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.publishDt||'--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="售价(元)" min-width ="80" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态" min-width ="80" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.stateNm }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布者" min-width ="100" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.promulgator }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width ="250" >
                    <template slot-scope="scope">
                        <el-button type="text"  @click="edit(scope)">编辑</el-button>
                        <el-button type="text"  @click="remove(scope)">删除</el-button>
                        <!-- <el-button type="text" @click="remove(scope)">推送</el-button> -->
                        <!-- <el-button type="text" v-if="scope.row.state == 'Publish'" @click="withdraw(scope)">下架</el-button> -->
                        <el-button type="text" v-clipboard:copy='scope.row.id' v-clipboard:success='clipboardSuccess'>复制ID</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <el-col :span="24" style="margin-top:10px" v-if="magazine_tables.length>0">
            <el-button size="small" @click="bathRemove">批量删除</el-button>
        </el-col>
        <el-col :span="24" class="pagination-warp" v-if="magazine_tables.length>0">
                <div class="text-center">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                        :current-page="listQuery.currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="listQuery.size"
                        layout="total, sizes, prev, pager, next ,jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </el-col>
        </template>
    </div>
</template>
<script>
import { getDetail } from '@/api/sys/detail'
import { selectList, deleteMagazine, deleteMagazines } from '@/api/magazine/magazine'
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
export default {
    directives: {
        clipboard
    },
    data() {
        return {
            loading:false,
            magazine_tables: [],
            periods:[],
            selections:[],
            total: null,
            listQuery: {
                currentPage: 1,
                size: 10,
                state: '',
                year: undefined,
                period: undefined
            },
            status: []
        }
    },

    created() {
        this.getList()
        this.getStatus()
        this.getPeriods()
    },
    methods:{
        getList(){
            this.loading = true
            const params = this.listQuery
            selectList(params).then(response => {
                this.magazine_tables = response.data.records
                this.total = response.data.total
                this.loading = false
            })
        },
        getStatus(){
            const param = {masterKey:"CONT_STAT"}
            getDetail(param).then(response => {
                if(response.code === 0){
                    this.status = response.data
                    this.status.unshift({id:-1,codeKey:'',codeValue:'全部'})
                }
            })
        },
        getPeriods(){
            const param = {masterKey:"PERIODS"}
            getDetail(param).then(response => {
                if(response.code === 0){
                    this.periods = response.data
                }
            })
        },
        clipboardSuccess() {
            this.$message({
                message: '复制成功',
                type: 'success',
                duration: 1500
            })
        },
        handleSearch(){
            this.listQuery.currentPage = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.listQuery.currentPage = 1
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.currentPage = val
            this.getList()
        },
        handleSelectionChange(values){
            this.selections = []
            values.forEach(v => {
                let data = {id:v.id}
                this.selections.push(data)
            })
        },
        addMagazine(){
            this.$router.push({"path":"/magazine/addMagazine","query":{router:'新增杂志'}})
        },
        remove(scope){
            let data = {id:scope.row.id}
             this.$confirm('确认删除已选中内容?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMagazine(data).then(response => {
                    if(response.code === 0){
                        this.$message({
                            message: response.msg,
                            type: 'success'
                        })
                        this.getList()
                    }
                })
            }).catch(() => {
            
            })
            
        },
        bathRemove(){
            if(this.selections.length === 0){
                this.$message({
                    type: 'warning',
                    message: '至少选择一行数据'
                })
                return
            }
            let data = this.selections
            this.$confirm('确认批量删除已选中内容?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMagazines(data).then(response => {
                    if(response.code === 0){
                        this.$message({
                            type: 'success',
                             message: response.msg
                        })
                        this.getList()
                    }
                })
          
            }).catch(() => {
            
            })
        },
        edit(scope){
            this.$router.push({path:"/magazine/addMagazine",query:{id:scope.row.id,router:'编辑杂志'}})
        }
        
     }
}
</script>
